<template>
  <div class="basic-container"  :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.containerBackground : variables.containerLightBackground, color:sideTheme === 'theme-dark' ? variables.containerColor : variables.containerLightColor,}" style="height: 100%" :class="{ 'basic-container--block': block }">
    <div style="position: relative;padding: 10px;width: 100%; height: 100%; box-sizing: border-box">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import variables from '@/assets/styles/variables.module.scss'
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore();
console.log('settingsStoretest',settingsStore);
const sideTheme = computed(() => settingsStore.sideTheme);
console.log('sideTheme',sideTheme);

const props = defineProps({
  radius: {
    type: [String, Number],
    default: 10,
  },
  background: {
    type: String,
  },
  block: {
    type: Boolean,
    default: false,
  }
});

// 计算属性
const styleName = computed(() => ({
  borderRadius: `${props.radius}px`,
  background: props.background,
}));

</script>

<style lang="scss">
.basic-container {
  padding: 10px 6px;
  box-sizing: border-box;

  &--block {
    height: 100%;

    .basic-container__card {
      height: 100%;
    }
  }

  &__card {
    width: 100%;
  }

  &:first-child {
    padding-top: 0;
  }
}
</style>
